<template>
  <div class="echart-part" :style="{height: para.height}" style="display: flex;flex-direction: column">
    <div style="flex-basis: 15%"></div>
      <div style="display: flex;justify-content: space-around;">
        <div style="flex-basis: 18%;height: 7.5vh;padding: 4px" v-for="(infor, i) in baseInfo" :key="`infor-${i}`">
                    <base-card
                      :para="{infor}"
                      style="border: .02rem solid #2b506e; background: transparent;"
                    >
                    </base-card>
        </div>
      </div>

    <div style="flex:1 1 auto;flex-basis: 80%;height: 80%">
<!--        <div id="base-data-svga"  style="width: 100%;height: 100%"></div>-->
      <div id="echarts-base" style="width: 100%;height: 100%">

      </div>
        <div ref="scrollDom" class="scroll">
            <div v-for="(item,index) in scrollData" :key="index" :style="{color:item.color}" class="scroll_item">
              <span>{{item.text}}</span>
              <span>{{item.num}}人</span>
              <span>{{item.time}}</span>

            </div>
        </div>

    </div>
  </div>

</template>
<script>
  import BaseCard from './base-card'
  import CountTo from '_c/count-to'
  import BaseMainGsap from './base-main-gsap'
  import BaseStarGsap from './base-star-gsap'
  import statService from '../../../api/stat/stat'
  import SVGA from 'svgaplayerweb'
  import { getDateByType,getNetNameByValue } from '@/libs/tools'
  import 'echarts-gl';
  const echarts = require("echarts");

  let myChart;


  let option = {
    // backgroundColor: 'rgba(0, 0, 0, 0)',
    globe: {
      baseTexture: 'base.jpg',
      heightTexture: 'base.jpg',
      displacementScale: 0.04,
      shading: 'realistic',
      // environment: 'base-star.jpg',
      realisticMaterial: {
        roughness: 0.9
      },
      postEffect: {
        enable: true
      }
    }
  };

  export default {
    name: 'base-data',
    components: {
      CountTo,
      BaseCard,
      BaseMainGsap,
      BaseStarGsap
    },
    props: {
      para: {}
    },
    data () {
      return {
        timer: '',
        timerScroll: '',
        intervalScroll:'',
        id: '',
        camera: null,
        scene: null,
        renderer: null,
        mesh: null,
        controls: null,
        color1: ['#ffdb5c', '#ff9f7f', '#fb7293'],
        color: ['#AAE3FF', '#4ce658', '#f7ff2b', '#ff712e', '#fb2cd6', '#fb3629', '#ffa836'],
        baseInfo: [
          {
            name: '确诊',
            unit: '个',
            color: '#AAE3FF',
          },
          {
            name: '疑似',
            unit: '个',
            color: '#FF9900',
          },
          {
            name: '治愈',
            unit: '个',
            color: '#19BE6B',
          },
          {
            name: '死亡',
            unit: '个',
            color: '#ED4014',
          }
        ],
        scrollData:[
          {
            text:'这里是名称',
            num:'13',
            time:'05-07',
            color:'#73BF78'
          },
          {
            text:'这里是名称',
            num:'10',
            time:'05-07',
            color:'#00AEFF'
          },
        ]
      }
    },
    mounted () {
      this.getData()
      this.getScrollData()
      // this.createSVGA()
      let me=this
      this.intervalScroll=setInterval(function () {
        //数据滚动动画
        if(me.$refs.scrollDom.clientHeight+me.$refs.scrollDom.scrollTop<me.$refs.scrollDom.scrollHeight){
          me.$refs.scrollDom.scrollTop++
        }else {
          me.$refs.scrollDom.scrollTop=0
        }

      },100)

    },
    beforeDestroy () {
      if (this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
        clearInterval(this.timer) //关闭
      }
      if(this.timerScroll){
        clearInterval(this.timerScroll) //关闭
      }
      if(this.intervalScroll){
        clearInterval(this.intervalScroll) //关闭
      }
    },
    methods: {
      getData () {
        this.baseInfo[0].count = 34621  //确诊数
        this.baseInfo[1].count = 27657 //疑似数量
        this.baseInfo[2].count = 2082 //治愈数量
        this.baseInfo[3].count = 723 //死亡数量
        setTimeout( this.draw(),1000)
      },
      getScrollData(){
        let me = this
        let param={
          startDate:'07-27',
          endDate:'07-28'
        }
        let data=[
          {
            text:'北京市',
            count:10
          }
        ]
        _.forEach(data,function (v,i) {
          if(parseInt(v.count)!==0){
            v.text=`这里是名称-${v.text}`
            v.num=v.count
            v.time=`${param.startDate}~${param.endDate}`
            v.color = (me.scrollData.length % 2 == 1) ? '#00AEFF' : '#73BF78'
            me.scrollData.push(v)
          }
        })
      },

      createSVGA() {
        let player = new SVGA.Player('#base-data-svga');
        let parser = new SVGA.Parser('#base-data-svga'); // Must Provide same selector eg:#demoCanvas IF support IE6+
        parser.load('base-data.svga', function(videoItem) {
          player.setVideoItem(videoItem);
          player.startAnimation();
        },err => {
          console.error(err)
        })
      },
      draw() {
        let div = document.getElementById('echarts-base')
        if (!myChart || !div.innerHTML) {
          myChart = echarts.init(document.getElementById('echarts-base'));
        }
        myChart.setOption(option)
        window.addEventListener("resize", () => myChart.resize(), false);
      }
    }
  }
</script>

<style scoped>

  .scroll{
    position: absolute;
    left: 0;
    bottom: 4vh;
    /*border: solid red 1px;*/
    font-size: 0.5rem;
    color: #00AEFF;
    height: 6rem;
    width: 240px;
    background: url("../../../assets/images/large-screen/scroll.png");
    background-size: 100% 100%;
    overflow-y: scroll;
  }
  ::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background-color: #041c34;
  }

  ::-webkit-scrollbar-track {
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #007acc;
  }
  .scroll_item{
    display: flex;
    justify-content: space-around;
    padding: 0.4rem 0.8rem;
  }


</style>
